<template>
  <div v-if="store.loading" class="loading">加载中...</div>
  <div class="close-loop-container">
    <el-card
      v-for="item in store.closeLoopList"
      :key="item.CLOSE_LOOP_ID"
      class="close-loop-card"
      shadow="hover"
    >
      <!-- 标题和分割线 -->
      <div>
      <span class="title">{{ item.CLOSE_LOOP_NAME }}</span>
      <hr class="section-divider" />
      </div>

      <!-- 环主和医嘱项目 -->
      <div class="card-content">
        <div class="info-item">
          <span class="label">环主：</span>
          <span class="value">{{ item.STAFF_NAME || '暂无' }}</span>
        </div>
        <div class="info-item">
          <span class="label">闭环简述：</span>
          <span class="value">{{ item.CLOSE_LOOP_DETAIL }}</span>
        </div>
        <div class="info-item">
          <span class="label">医嘱项目：</span>
          <span class="value">{{ item.CLOSE_LOOP_NAME }}</span>
        </div>


        <hr class="section-divider" />

        <!-- 节点统计 -->
        <div class="stats">
          <div class="stat-item">
            <span class="label">节点个数：</span>
            <span class="value">{{ item.NODE_COUNT }}</span>
          </div>
          <div class="stat-item">
            <span class="label">完整性检测节点：</span>
            <span class="value">{{ item.INTEGRITY_COUNT }}</span>
          </div>
          <div class="stat-item">
            <span class="label">及时性检测节点：</span>
            <span class="value">{{ item.TIME_COUNT }}</span>
          </div>
        </div>
        <hr class="section-divider" />

         <!-- 检测按钮 -->
        <div class="action-buttons">
          <el-button
            link type="primary"
            @click="handleIntegrityCheck(item.CLOSE_LOOP_ID)"
            class="left-button"
          >
            立即检测完整性
          </el-button>
          <el-button
            type="success"
            @click="handleTimelinessCheck(item.CLOSE_LOOP_ID)"
            class="right-button"
          >
            立即检测及时性
          </el-button>
        </div> 
        <hr class="section-divider" />

        <!-- 配置按钮 -->
        <div class="config-buttons">
          <el-button
            link type="primary"
            class="config-btn"
            @click="handleRouterNavigate('closeconfiga', '1', item.CLOSE_LOOP_ID)"
          >
            基本信息
          </el-button>
          <el-button
            link type="primary"
            class="config-btn"
            @click="handleRouterNavigate('closeconfigb', '2',item.CLOSE_LOOP_ID)
            "
          >
            医嘱配置
          </el-button>
          <el-button
            link type="primary"
            class="config-btn"
            @click="handleRouterNavigate('closeconfigc', '3',item.CLOSE_LOOP_ID)"
          >
            节点配置
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useCloseLoopStore } from '@/stores/closeLoopList'; // 引入 Pinia Store
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';


const store = useCloseLoopStore();
const router = useRouter();

// 在组件挂载时加载数据
onMounted(() => {
  store.fetchCloseLoopList(); // 从Store中获取数据
});

// // 检测操作方法
// const handleIntegrityCheck = (id) => {
//   console.log('立即检测完整性:', id);
//   // 调用检测逻辑
// };

// const handleTimelinessCheck = (id) => {
//   console.log('立即检测及时性:', id);
//   // 调用检测逻辑
// };

// 路由跳转方法
const handleRouterNavigate = (type, step,closeLoopId) => {
  // 使用路由名称和参数传递步骤编号和ID
  const routeMap = {
    closeconfiga: 'CloseConfigA', // 子路由名称
    closeconfigb: 'CloseConfigB',
    closeconfigc: 'CloseConfigC',
  };

  // 跳转到目标子路由，并传递参数（如步骤ID和闭环ID）
  router.push({
    name: routeMap[type],
    query: { 
      step : step, // 步骤编号
      closeLoopId: closeLoopId, // 闭环ID
    }, // 仅传递步骤编号
  });
};
</script>

<style scoped>
.close-loop-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.close-loop-card {
  border-radius: 8px;
  transition: box-shadow 0.3s;
  overflow: hidden;
}

.close-loop-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 1.2em;
  font-weight: bold;
}

.section-divider {
  margin: 10px 0;
  border: none;
  border-top: 1px solid #eaecef;
}

.info-item {
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
  display: inline-block;
  width: 120px;
}

.value {
  word-break: break-all;
}

.stats {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.stat-item {
  flex: 1;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}

.config-buttons {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.config-btn {
  padding: 0;
  color: #409eff;
  text-decoration: underline;
}

.config-btn:hover {
  color: #66b1ff;
}

@media (max-width: 768px) {
  .close-loop-container {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
    gap: 10px;
  }
}
</style>